<template>
	<view class="logo">
		<view class="logo-center">
			<uni-forms ref="form" :modelValue="form" :rules="rules">
				<uni-forms-item name="username">
					<uni-easyinput v-model="form.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="logo-db">
			<view class="logo-db-dl" @click="getDelu">
				登陆
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState, //先导入mapState方法
		mapMutations,
		mapActions,
	} from "vuex";
	import base from '@/utils/env.js'
	import {
		login,
		getInfo,
		InfoChange,
		avatarUpload,
		updatePwd
	} from '@/api/login/login.js'
	import {
		setToken
	} from '@/utils/auth.js'
	export default {
		data() {
			return {
				form: {
					"password": "123456",
					"username": "u1",

				},
				rules: {

				}

			};
		},
		methods: {
			...mapActions('user', ['getInfo']),
			getDelu() {
				let that = this;
				login(this.form).then((res) => {
					/* token */
					setToken(res.token)
					/* 保存用户消息 */
					this.getInfo()
					/* page */
					uni.switchTab({
						url: '/pages/index/index'
					})
				})

			},
			// async getInfo() {
			// 	await getInfo()
			// },

			// async InfoChange() {
			// 	await InfoChange()
			// },
			// async updatePwd() {
			// 	await updatePwd()
			// },

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep uni-radio-group {
		width: 80%;
	}

	.logo {
		padding: 322rpx 30rpx;

		.logo-hd {
			text-align: center;

			image {
				width: 100rpx;
			}

			.logo-hd-h1 {
				font-size: 40rpx;
				color: #000000;
				font-weight: 600;
				letter-spacing: 5rpx;
				line-height: 64rpx;
			}

			.logo-hd-h3 {
				font-size: 27rpx;
				letter-spacing: 5rpx;
				color: #666;
			}
		}

		::v-deep .uni-forms-item {
			margin-bottom: 44rpx;
		}

		.logo-center {
			margin-top: 120rpx;

			::v-deep .uni-easyinput__content-input {
				border-bottom: 1rpx solid #D8D8D8;
				font-size: 30rpx;
				height: 80rpx;
			}

			::v-deep .is-input-border {
				border: 0;
			}

			.logo-center-nr {
				letter-spacing: 5rpx;
				font-size: 23rpx;
				display: flex;
				justify-content: space-between;
				color: #555;

				text {
					color: #0091FF;
				}

				.zhuces {
					color: #0091FF;

				}

				::v-deep .uni-radio-input {
					width: 30rpx;
					height: 30rpx
				}
			}
		}

		.logo-db {
			margin-top: 112rpx;

			.logo-db-dl {
				background-color: #0091FF;
				color: #fff;
				line-height: 90rpx;
				text-align: center;
				border-radius: 48rpx;

			}
		}
	}

	.zhuces {
		display: flex;

		button {
			width: 46% !important;
		}
	}

	.loginContent {
		padding: 50rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 150rpx;
		}

		.box-tu image {
			width: 184rpx;
			height: 184rpx;
			border-radius: 50%;
			margin-bottom: 162rpx;
		}

		uni-button {
			font-size: $uni-font-size-lg;
			font-weight: 600;
			color: #fff;
		}

		uni-button[type=default] {
			min-height: 90rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: red;
			margin-top: 20rpx;
		}

		button {
			width: 100%;
		}

		.haoma {
			color: #666;
			font-size: 35rpx;
			margin-top: 50rpx;
		}

		.haoma2 {
			min-height: 45px;
			height: 45px;
			line-height: 45px;
			background-color: #7976E9;
			text-align: center;
			color: #fff;
			margin-bottom: 20px;
		}

		.placeholder {
			color: #ccc;
		}

	}

	.password-login {
		padding: 30upx 0;

		.input-box {
			padding: 0 50upx;
			// border-bottom: 1upx solid #f0f0f0;
			margin-bottom: 50upx;

			input {
				// padding: 27upx 0;
				font-size: 40upx;
				color: #333;
				font-weight: bold;
				height: 100rpx !important;
			}

		}

		.zhucetiaoting {
			text-align: center;
			margin-bottom: 80upx;
			color: #7976E9;
			font-weight: 700;
		}

		.zhucea {
			margin-bottom: 20rpx;
		}
	}

	.zhuce {
		margin-top: 500rpx;
	}


	.uni-icons {
		margin-right: 10rpx;
	}

	.uni-input {
		height: 50 !important;
	}
</style>